<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>table</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- basic styles -->

		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.min.css" />

		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->

		<!-- page specific plugin styles -->

		<!-- fonts -->

		
		<!-- ace styles -->

		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="assets/css/ace-skins.min.css" />

		<!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="assets/js/ace-extra.min.js"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="assets/js/html5shiv.js"></script>
		<script src="assets/js/respond.min.js"></script>

		<script src="assets/js/jquery-1.10.2.min.js"></script>
		<![endif]-->


		<link rel="stylesheet" type="text/css" href="assets/DataTables-1.10.15/media/css/jquery.dataTables.css">

		<!-- jQuery -->
		<script type="text/javascript" charset="utf8" src="assets/DataTables-1.10.15/media/js/jquery.js"></script>

		<!-- DataTables -->
		<script type="text/javascript" charset="utf8" src="assets/DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
	</head>



	<script type="text/javascript">

/*        $(document).ready(function () {
            $('#person').dataTable({ // 和<table>的id对应，指定初始化datatables。

                //填充的数据，这里用的是静态数据，数据源可以来自前台，也可以来自服务器
                "data": [
                    { "name": "黄蓉","corpname":"丐帮","dynasty":"南宋","gender":"女","job":"丐帮帮主"},
                    { "name": "杨过","corpname":"古墓派","dynasty":"南宋","gender":"男","job": "神雕侠" }
                ],
                //给列赋值，这里的列名需要和data的数据名对应
                "columns": [
                    { "data": "name" },
                    { "data": "corpname" },
                    { "data": "dynasty" },
                    { "data": "gender" },
                    { "data": "job" }
                ]
            });
        });*/

        var data = [
            [

                "Tiger Nixon","1",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"https://www.baidu.com\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",

            ],
            [

                "Tiger Nixon","2",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],
            [

                "Tiger Nixon","3",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],
            [

                "Tiger Nixon","Tiger Nixon",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
				"System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],
            [

                "Tiger Nixon","Tiger Nixon",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],
            [

                "Tiger Nixon","Tiger Nixon",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],[

                "Tiger Nixon","Tiger Nixon",
                "System Architect",
                "Edinburgh",
                "System Architect",
                "Edinburgh","Edinburgh",
                "System Architect",
                "<a href=\"#\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",


            ],

        ];
	</script>
	<body>
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
										<div class="table-responsive">
											<table id="sample-table-1" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th>编号</th>
														<th>姓名</th>
														<th>年龄</th>
														<th>疾病类型</th>
														<th>
															最近康复训练时间
														</th>
														<th>呼吸速率</th>
														<th>心率</th>
														<th>心率</th>
														<th>查看详情</th>


													</tr>
												</thead>

											

								<div id="modal-table" class="modal fade" tabindex="-1">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header no-padding">
												<div class="table-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
														<span class="white">&times;</span>
													</button>
													Results for "Latest Registered Domains
												</div>
											</div>

											<div class="modal-footer no-margin-top">
												<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
													<i class="icon-remove"></i>
													Close
												</button>

												<ul class="pagination pull-right no-margin">
													<li class="prev disabled">
														<a href="#">
															<i class="icon-double-angle-left"></i>
														</a>
													</li>

													<li class="active">
														<a href="#">1</a>
													</li>

													<li>
														<a href="#">2</a>
													</li>

													<li>
														<a href="#">3</a>
													</li>

													<li class="next">
													<a href="#">
														<i class="icon-double-angle-right"></i>
													</a>
												</li>
												</ul>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal-dialog -->
								</div><!-- PAGE CONTENT ENDS -->
								</table>
							</div><!-- /.col -->
						</div><!-- /.row -->


					</div><!-- /.page-content -->
				</div><!-- /.main-content -->

				<div class="ace-settings-container" id="ace-settings-container">
					<div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
						<i class="icon-cog bigger-150"></i>
					</div>

					<div class="ace-settings-box" id="ace-settings-box">
						<div>
							<div class="pull-left">
								<select id="skin-colorpicker" class="hide">
									<option data-skin="default" value="#438EB9">#438EB9</option>
									<option data-skin="skin-1" value="#222A2D">#222A2D</option>
									<option data-skin="skin-2" value="#C6487E">#C6487E</option>
									<option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
								</select>
							</div>
							<span>&nbsp; Choose Skin</span>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
							<label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
							<label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
							<label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
							<label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
						</div>

						<div>
							<input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
							<label class="lbl" for="ace-settings-add-container">
								Inside
								<b>container</b>
							</label>
			</div>
			</div>
			</div><!-- /.main-container-inner -->

			<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
				<i class="icon-double-angle-up icon-only bigger-110"></i>
			</a>	
		


		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>


		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>

		<!-- page specific plugin scripts -->

		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>

		<!-- ace scripts -->

		<script src="assets/js/ace-elements.min.js"></script>
		<script src="assets/js/ace.min.js"></script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">




			jQuery(function($) {




var data=[];
for(var i=0;i<100;i++){

	var patient=[

		10001,
		"小",
		"28",
		"心脏病",
		"2018/4/16 23：11",
		"50",
		"80",
		"a",
		"<a href=\"https://www.baidu.com\" class=\"tooltip-info\" data-rel=\"tooltip\" title=\"View\"> <span class=\"blue\"><i class=\"icon-zoom-in bigger-120\"></i></span> </a>",

	]

	patient[0]=patient[0]+i;
	data[i]=patient;

}
console.log(data)
var oTable1 = $('#sample-table-1').dataTable( {
"aoColumns": [
  { "bSortable": false },
  null, null,null, null, null,null,null,
  { "bSortable": false }
], "iDisplayLength" : 10,
	"data":data


});





$('table th input:checkbox').on('click' , function(){
	var that = this;
	$(this).closest('table').find('tr > td:first-child input:checkbox')
	.each(function(){
		this.checked = that.checked;
		$(this).closest('tr').toggleClass('selected');
	});
		
});


$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
	var $source = $(source);
	var $parent = $source.closest('table')
	var off1 = $parent.offset();
	var w1 = $parent.width();

	var off2 = $source.offset();
	var w2 = $source.width();

	if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
	return 'left';
}
})





		</script>
	
</body>
</html>